<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="add-bottons right" @click="navigateToPage('system-menu-add')">
				新增一级菜单
			</view>
		</view>
		
		<view class="menu-content left clearfix">
			<view class="menu-table left clearfix">
				<!--头部-->
				<view class="menu-tr left clearfix" style="font-weight:bold;color:#909399">
					<view class="menu-sort left">
						排序
					</view>
					<view class="menu-title left" style="padding-left:10px;">
						标题
					</view>
					
					
					<view class="menu-title left" style="width:300px;">
						URL
					</view>
					<view class="menu-title left" style="width:100px;">
						是否启用
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						操作
					</view>
				</view>
				
				
				
				
				<view  v-for="(item,index) in menu">
				<view class="menu-tr left clearfix" style="color:#606266;">
					<view class="menu-sort left">
						{{item.sort}}
					</view>
					<view class="menu-title left" style="text-align: left;padding-left:10px;font-weight:500;">
						<label>
							<uni-icons :type="item.icon" size="15" color="#666" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							 {{item.title}}
						</label>
						
					</view>
					
					<view class="menu-title left" style="width:300px;">
						{{item.url}}
					</view>
					<view class="menu-title left" style="width:100px;text-align: center;">
						<label v-if="item.is_show==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="item.is_show==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						<view class="buttons left"  @click="navigateToPage('system-menu-add',item._id,'y','','y')">
							子菜单
						</view>
						
						<view class="buttons left" @click="navigateToPage('system-menu-add',item._id)">
							修改
						</view>
						
						<view class="buttons-del left" @click="remove(item,index)">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				
				
				<view class="menu-tr left clearfix" style="color:#606266;" v-for="(items,indexs) in item.children">
					<view class="menu-sort left">
						{{items.sort}}
					</view>
					<view class="menu-title left" style="text-align: left;padding-left:10px;">
						<uni-icons type="icon-jiantou_xiangyouliangci" size="15" color="#ccc" style="margin-left:15px;margin-right:5px;" custom-prefix="iconfont"></uni-icons>{{items.title}}
					</view>
					<view class="menu-title left" style="width:300px;">
						{{items.url}}
					</view>
					<view class="menu-title left" style="width:100px;text-align: center;">
						<label v-if="items.is_show==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="items.is_show==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					<view class="menu-title left" style="width:235px;border-right:none;">
						<view class="buttons left" style="background:#eee;">
							子菜单
						</view>
						
						<view class="buttons left" @click="navigateToPage('system-menu-add',item._id,'y',items._id)">
							修改
						</view>
						
						<view class="buttons-del left" @click="remove(item,index,items._id)">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				</view>
				
				
				
				
				
				
				
			</view>
		</view>
	</view>
</template>


<style scoped lang="scss">
	.menu-title label{float:left;margin-right:5px;}
	.menu-title{width:calc(100% - 750px);height:45px;border-right:1px solid #eee;line-height:45px;text-align:center;font-size:14px;}
	.menu-sort{width:100px;height:45px;line-height:45px;text-align:center;font-size:14px;border-right:1px solid #eee;}
	.menu-tr:hover{background:#f8f8f8;}
	.menu-tr{width:100%;height:45px;border-bottom:1px solid #eee;}
	.menu-table{width:100%;border:1px solid #eee;border-bottom:none;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"system-menu",
		data() {
			return {
				menu:[],
				routes: [
				        {
				          to: "/A",
				          name: "系统菜单",
				        },
				        {
				          to: "/B",
				          name: "菜单管理",
				        }
				      ],
			};
		},
		mounted() {
			this.getSystemMenu();
		},
		methods:{
			//删除
			remove(item,index,children=false){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							if(item._id.length > 5){
								if(children == false){
									db.collection('system_menu').where({_id:item._id}).remove().then(res=>{
										that.menu.splice(index,1);
									});
								}else if(children){
									db.collection('system_menu').where({_id:item._id}).get({getOne:true}).then(result=>{
										var data = result.result.data;
										var childrens = data.children;
										var indexs = childrens.findIndex(item=>item._id == children);
										childrens.splice(indexs,1);
										db.collection('system_menu').where({_id:item._id}).update({children:childrens}).then(result=>{
											that.menu[index].children.splice(indexs,1);
										});
									});
								}
								
							}
						}
					}
				});
			},
			//获取菜单列表
			getSystemMenu(){
				uni.showLoading({
					title:'加载中'
				})
				db.collection('system_menu').orderBy('sort asc').get().then(res=>{
					uni.hideLoading();
					this.menu = res.result.data;
				}).catch(err=>{
					uni.hideLoading();
				});
			},
			//新增菜单
			navigateToPage(item,id,children=false,cid=false,newAdd=false){
				var page = '/pages/index/index?page='+item+'&id='+id;
				if(children!=false){
					page = page+'&children=y'
				}
				if(cid!=false){
					page = page+'&childrenId='+cid
				}
				
				if(newAdd!=false){
					page = page + '&newAdd='+newAdd
				}
				console.log('page',page);
				uni.navigateTo({
					url:page
				})
				
				
			}
		}
	}
</script>
